Buttons: floating action button

A floating action button (FAB) represents the primary action of a screen.

Interactive demo

This demo lets you preview the FAB component, its variations, and configuration options. Each tab displays a different type of FAB.

Developer documentation

Platform Status
Android Available
iOS Available
Web Available
Flutter Available

Usage

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

Only use a FAB if it is the most suitable way to present a screen's primary action.

DoRepresent the most common primary action with a floating action button, such as drafting a new email.
DoFABs are not needed on every screen, such as when images represent primary actions.
Don'tDon't display multiple FABs on a single screen.
CautionOccasionally two FABs can be used, if they perform distinct, yet equally important, actions.

Principles

Primary

A FAB represents the primary action on a screen.

Constructive

A FAB should perform a constructive action (such as create, share, or explore).

Contextual

A FAB should be relevant to the screen on which it appears.

Anatomy

Black circle with a centered white plus icon
1. Container
2. Icon

Container

The FAB is typically displayed in a circular container. An app's color scheme determines its color fill, which should contrast with the area behind the...

The FAB is typically displayed in a circular container. An app's color scheme determines its color fill, which should contrast with the area behind the FAB.

FAB containers come in two sizes:
1. Default (56 x 56dp)
2. Mini (40 x 40dp)

A mini FAB should be used on smaller screens. When a screen width is 460dp or less, the container of a default FAB (56dp) should transform into the mini size (40dp).

Mini FABs can also be used to create visual continuity with other screen elements.

This mini FAB creates visual continuity by having a related size, shape, and placement to the folder icons below it.
DoFAB containers adopt a color from an app's palette.
Don'tDon't layer badges or other elements in front of a FAB.

Icon

A FAB's icon should clearly illustrate its action. A FAB shouldn’'t contain notifications or actions found elsewhere on a screen.

A FAB's icon should clearly illustrate its action. A FAB shouldn't contain notifications or actions found elsewhere on a screen.

Don'tDon't use ambiguous iconography.
Don'tDon't place text in a regular FAB.

Placement

FABs can attach to top app bars and the edge of some components.

DoA floating action button (FAB) can attach to a top app bar.
DoA FAB can be attached to the edge of a component.
Don'tIndividual components, such as cards, cannot each have their own FAB.

Behavior

Actions

A floating action button (FAB) can trigger an action either on the current screen, or it can perform an action that creates a new screen....

A floating action button (FAB) can trigger an action either on the current screen, or it can perform an action that creates a new screen.

A FAB promotes an important, constructive action such as:

  • Create
  • Favorite
  • Share
  • Start a process

Avoid using a FAB for minor or destructive actions, such as:

  • Archive or trash
  • Alerts or errors
  • Limited tasks like cutting text
  • Controls better suited to a toolbar (like controls to adjust volume or font color)
DoUse FABs for primary, positive actions.
Don'tDo not use FABs for minor, overflow, unclear, or destructive actions.

Motion

When a FAB animates on screen, it expands outward from a central point. The icon within it may be animated as well. While FABs should...

Appearing on screen

When a FAB animates on screen, it expands outward from a central point. The icon within it may be animated as well.

While FABs should be relevant to screen content, they aren't attached to the surface on which content appears. FABs move separately from other UI elements because of their relative importance.

Screen transitions

FABs can morph to launch related actions. When a screen changes its layout, the FAB should disappear and reappear during the transition.

Reappearance

The FAB should only reappear if it's relevant to the new screen. It should reappear in the same position, if possible.

MuteUnmute
Throughout this user flow the FAB location remains consistent.

Understanding motion

Motion helps make a UI expressive and easy to use.

Related link arrow_downward

Tabs

Tabs organize high level content in an app content, such as switching between views, data sets, or functional aspects of an app.

Related Article arrow_downward

Tabbed screens

When tabs are present, the FAB should briefly disappear, then reappear when the new content moves into place. This expresses that the FAB is not...

When tabs are present, the FAB should briefly disappear, then reappear when the new content moves into place. This expresses that the FAB is not connected to any particular tab.

MuteUnmute
DoWhen switching between tabs, FABs disappear and then reappear.
MuteUnmute
Don'tWhen switching between tabs, FABs don't move in unison with screen content.

Types of transitions

Speed dial

When pressed, a FAB can display three to six related actions in the form of a speed dial. This transition can occur in one of...

When pressed, a FAB can display three to six related actions in the form of a speed dial. This transition can occur in one of the following ways:

  • Upon press, the FAB can emit related actions
  • Upon press, the FAB can transform into a menu containing related actions (Android only)

If more than six actions are needed, something other than a FAB should be used to present them.

Emit related actions

Upon press, the FAB remains visible and emits a stack of related actions. If the FAB is tapped in this state, it should either initiate its default action or close the speed dial actions.

A FAB displays a stack of related actions.
Don'tA speed dial should include at least three options.
Don'tA speed dial should include no more than six options.
DoA FAB can contain a list of contacts.
DoRelated actions can have text labels.
Don'tA FAB shouldn't transform into unrelated actions.
Don'tSpeed dial options shouldn't include an overflow menu.

Transform into a menu with the related actions

Upon press on Android, the FAB can transform into a menu containing related actions. A scrim indicates that functionality outside of the action menu is temporarily disabled. The menu remains on-screen until an action, or the scrim, is tapped.

A FAB transforming into an action menu
Don'tDon't use an action menu with fewer than three options.
Don'tAn action menu shouldn't include more than six options, as action menus don't support scrolling.

Menus

Menus display a list of choices on temporary surfaces.

Related Article arrow_downward

Transformations

The FAB uses a container transform transition pattern to transform into various surfaces.

Container transform

For transitions between UI elements that include a container

Related Link arrow_downward

Within the screen

The FAB can transform into another surface in an app. Morphing should be reversible and transform the new surface back into the FAB.

The FAB can transform into another surface in an app. Morphing should be reversible and transform the new surface back into the FAB.

A FAB can morph into a surface that is part of the app structure.

Full screen

The FAB can transform into a new surface that spans the entire screen. This type of transformation is typically for creating new content.

The FAB can transform into a new surface that spans the entire screen. This type of transformation is typically for creating new content.

A FAB can transform into a new surface that spans the entire screen.

Extended FAB

The extended FAB is wider, and it includes a text label.

Extended FAB

Anatomy

The width of an extended FAB’s container can be fixed or fluid. The icon of an extended FAB should intuitively represent its action. The text...

1. Container
2. Icon (optional)
3. Text label

Container

The width of an extended FAB’s container can be fixed or fluid.

  • A fixed width container is defined by the cumulative width of the icon, text label, and padding.
  • A fluid width container is defined by its relationship to something else on screen, such as screen width or the layout grid.
This fixed extended FAB's width is defined by the cumulative width of the icon, text label, and container padding.
This extended FAB's container width is defined by the layout grid columns.

Icon

The icon of an extended FAB should intuitively represent its action.

Icons should be placed to the left of text labels for left-to-right languages.
Icons should be placed to the right for right-to-left languages.
DoUnlike standard FABs, extended FABs don't require an icon.
Don'tAn extended FAB can't have an icon without a text label.

Text label

The text label of an extended FAB should describe its action.

CautionOnly truncate text if shorter text isn't an option.
Don'tAvoid wrapping text.

Placement

The extended FAB can be positioned in the center, left, or right side of a screen. For UIs larger than 840dp, such as desktop, the...

The extended FAB can be positioned in the center, left, or right side of a screen.

Desktop and tablet

For UIs larger than 840dp, such as desktop, the extended FAB should be placed at the top left of the screen, or at the bottom right of the screen.

On desktop, the extended FAB placed at the top left
On desktop, the extended FAB placed at the bottom right

Mobile

On mobile, the extended FAB should be placed at the bottom right or bottom center.

On mobile, the extended FAB placed at the bottom center
On mobile, the extended FAB placed at the bottom right
CautionAvoid using an extended FAB above a bottom app bar, as the combination takes up a lot of screen space. If they are paired, the extended FAB should collapse on scroll.

Behavior

Extended FABs have speed dial options, and can transform into standard FABs if space is limited

Speed dial

The extended FAB can also display a speed dial of 3-6 related actions when tapped. On hover, these related actions expand to display labels.

During the speed dial transition, the extended FAB becomes a standard FAB.

Extended FAB speed dial

Transformation to a standard FAB

If space becomes limited, the extended FAB can transform into a standard FAB. For example, if an app viewport is resized below 840dp, or a navigation drawer opens up.

Extended FAB transforming into a standard FAB

An extended FAB can transform into a standard FAB when a screen is scrolled.

The FAB should not return to an extended FAB until the user scrolls back to the top of the page.

Extended FAB transforming into a standard FAB after the user scrolls to the top of the page

Theming

Reply Material Theme

This email app’s floating action button has been customized using Material Theming. Areas of customization include color and shape. Reply is an email app that...

This email app's floating action button has been customized using Material Theming. Areas of customization include color and shape.

Reply's customized FAB

Reply

Reply is an email app that uses Material Design components and Material Theming to create an on-brand communication experience.

Related Article arrow_downward

Color

Reply's extended FAB uses custom color on two elements: the container, icon, and text.

Element Category Attribute Value
Container Secondary Color
Opacity		 #FAAB1A
100%
Icon On Secondary Color
Opacity		 #232F34
100%
Text On Secondary Color
Opacity		 #232F34
100%

The color system

The Material Design color system can help you create a color theme that reflects your brand or style.

Related link arrow_downward

Applying color to UI

In a UI, color has a variety of roles: from containing meaning, to expressing a look and feel.

Related link arrow_downward

Typography

Reply's extended FAB uses custom typography on its button text.

Element Category Attribute Value
Text Button Typeface
Font
Size
Case		 Work Sans
ExtraBold
15
All caps

Understanding typography

Typography is critical in establishing hierarchy and expressing brand presence that supports an effective digital experience.

Related article arrow_downward

Shape

Reply's floating action button uses a custom shape on the container.

Element Category Attribute Value
Container Small component Family
Size		 Rounded
50%

About Shape

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

Related link arrow_downward

Posivibes Material Theme

This social media app's floating action button has been customized using Material Theming. Areas of customization include color and shape. The Material Design color system...

This social media app's floating action button has been customized using Material Theming. Areas of customization include color and shape.

Posivibes' customized FAB

Color

Posivibe's FAB uses custom color on two elements: the container and icon.

Element Category Attribute Value
Container Secondary Color
Opacity		 #000000
100%
Icon On Secondary Color
Opacity		 #FFFFFF
100%

The color system

The Material Design color system can help you create a color theme that reflects your brand or style.

Related link arrow_downward

Applying color to UI

In a UI, color has a variety of roles: from containing meaning, to expressing a look and feel.

Related link arrow_downward

Shape

Posivibes' FAB uses a custom shape on its container. *Posivibes' FABs use an override of the small component shape category size value.

Element Category Attribute Value
Container Override* Family
Size		 Cut
50%

About Shape

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

Related link arrow_downward

Shrine Material Theme

This retail app's extended floating action button has been customized using Material Theming. Areas of customization include color, typography, and shape. The Material Design color...

This retail app's extended floating action button has been customized using Material Theming. Areas of customization include color, typography, and shape.

Shrine's customized FAB

Shrine

Shrine is a lifestyle and fashion brand that demonstrates how Material Design can be used in e-commerce.

Related Article arrow_downward

Color

Shrine's extended FAB uses custom color on two elements: the container and text.

Element Category Attribute Value
Container Primary Color
Opacity		 #FEDBD0
100%
Text On Primary Color
Opacity		 #442C2E
100%

The color system

The Material Design color system can help you create a color theme that reflects your brand or style.

Related link arrow_downward

Applying color to UI

In a UI, color has a variety of roles: from containing meaning, to expressing a look and feel.

Related link arrow_downward

Typography

Shrine's extended FAB uses custom typography on its button text.

Element Category Attribute Value
Text Button Typeface
Font
Size
Case		 Rubik
Medium
14
All caps

Understanding typography

Typography is critical in establishing hierarchy and expressing brand presence that supports an effective digital experience.

Related article arrow_downward

Shape

Shrine's extended FAB uses a custom shape on its container.

Element Category Attribute Value
Container Small component Family
Size		 Cut
4;4;4;4dp

About Shape

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

Related link arrow_downward

Specs

Floating action button

#000000ff R0 G0 B0 A1.00 Elevation 6dp All corners Rounded: 28dp All measurements are displayed in device-independent pixels (dps) #000000ff R0 G0 B0 A1.00 Elevation...

Regular

  • Measurement 56
  • Measurement 16
  • Measurement 16
  • Measurement C
  • Measurement 24
 

Mini FAB

  • Measurement 40
  • Measurement 8
  • Measurement 8
  • Measurement C
  • Measurement 24
 

Placement

  • Measurement 16
  • Measurement 16
 

Extended floating action button

14dp #ffffff #000000ff R0 G0 B0 A1.00 Elevation 6dp All corners Rounded: 32dp All measurements are displayed in device-independent pixels (dps) Elevation 6dp All corners...

  • Measurement 48
  • Measurement 12
  • Measurement 12
  • Measurement 20
  • Measurement C
  • Measurement 24
 

Placement

  • Measurement 8
 

Up next

Components

Cards

Components

Buttons

Components

Navigation drawer